<template>
  <div class="container">
    <div class="page-header">
      <span class="title-item">入库信息</span>
    </div>
    <div class="page-body">
      <div class="page-body">
        <a-form layout="horizontal" :form="form" :colon="false">
          <a-row type="flex">
            <a-col :span="6" :offset="1">
              <a-form-item class="form-item" label="备品名称" :colon="false">
                <a-input
                  class="inline-input"
                  v-model="form.spareName"
                  placeholder="xxxxx设备"
                  autocomplete="off"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="4" :offset="1">
              <a-form-item class="form-item" label="入库数量" :colon="false">
                <a-input
                  v-model="form.spareAmount"
                  class="inline-input"
                  placeholder
                  autocomplete="off"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="4" :offset="1">
              <a-form-item class="form-item" label="生产厂家" :colon="false">
                <a-input
                  v-model="form.manufactureFactory"
                  class="inline-input"
                  placeholder
                  autocomplete="off"
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6" :offset="1">
              <a-form-item class="form-item" label="备品型号" :colon="false">
                <a-input class="inline-input" v-model="form.spareVersion" autocomplete="off"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="4" :offset="1">
              <a-form-item class="form-item" label="备品类型" labelAlign="right" :colon="false">
                <a-select class="fuze-management" default-value allow-clear>
                  <a-select-option
                    :value="item.id"
                    v-for="(item,index) in property"
                    :key="index"
                    @click="selecteds(item.id)"
                  >{{item.propertyName}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col class="submit-box">
              <a-button class="select-btn" @click="getAdd()">确认入库</a-button>
              <a-button class="select-to" @click="()=>form={}">重新填写</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
export default {
  name: "index",
  data() {
    return {
      form: {
        spareName: "",
        spareAmount: "",
        spareVersion: "",
        sparePropertyId: "", //属性
        manufactureFactory:"",//生产厂家
      },
      moment,
      property: [], //备品属性列表
    };
  },
  mounted() {
    this.getTypeId(), this.getAtrribute();
  },
  methods: {
    onTouruChange(e) {
      console.log(e);
    },
    // 获取下拉选中数据
    selecteds(data) {
      this.form.sparePropertyId = data;
    },
    //备机入库
    getAdd() {
      this.$api.PostsaveSpareStandby(this.form).then((res) => {
        console.log(res);
        if (res.status == 200) {
          console.log("入库成功");
          this.$message.success("操作成功");
        } else {
          console.log("入库失败");
          this.$message.error("操作失败");
        }
      });
    },
    //获取类型id
    getTypeId() {
      this.$api.GetstockBytype().then((res) => {
        this.form.spareTypeId = res.data.data[1].id;
      });
    },
    //获取备品属性
    getAtrribute() {
      this.$api.GetlistSpareProperty().then((res) => {
        this.property = res.data.data;
        console.log(this.property);
      });
    },
  },
};
</script>

<style scoped src="../../../assets/style/pollution.css"></style>
<style scoped lang="scss">
::v-deep .ant-col .ant-form-item-control-wrapper {
  width: 80%;
}
::v-deep .select-to {
  border: 1px solid #bebebe;
  color: #bebebe;
  background: #2b4341;
}
::v-deep .page-header {
  margin-left: 25px;
  margin-top: 30px;
}

::v-deep .ant-form-item {
  display: flex;
}
::v-deep .submit-box {
  float: right;
  margin-right: 210px;
}
::v-deep .ant-form-item-control-wrapper {
  width: 100%;
}
.page-body {
  margin-top: 70px;
}
</style>
